<template>
  <common-search :col-layout="{xxl: 6, xl:8, lg: 8, md: 12, sm: 24, xs: 24}" v-model="query" :formItems="formItems" @search="search" @reset="reset"></common-search>
  <a-button type="primary" @click="exportData" :loading="exportLoading">导入发货计划</a-button>
  <common-table
      :columns="columns"
      :dataSource="dataList"
      v-model:localPagination="page"
      @paginationChange="onPageChange"
      v-model:loading="loading"
      :scroll="{ x: 'max-content'}"
  >
  </common-table>
  <a-modal v-model:open="importModal" @cancel="importCancel" title="导入发货计划">
    <div style="display: flex;margin-bottom: 20px;align-items: center">
      <span>站点：</span>
      <a-select style="width: 150px" v-model:value="site" placeholder="请选择站点" :options="formItems[0].options" allow-clear/>
    </div>
    <div style="display: flex;margin-bottom: 20px;align-items: flex-start">
      <span>发货计划：</span>
      <a-upload
          accept=".xlsx,.xls"
          :headers="headers"
          v-model:file-list="fileList"
          :action="action"
      >
        <a-button>
          <uploadOutlined/>
          上传文件
        </a-button>
      </a-upload>
    </div>
    <template #footer>
      <a-button @click="importCancel">取消</a-button>
      <a-button type="primary" :loading="btnLoading" :disabled="fileList.length === 0 || site === '' || site === undefined" @click="handleOk">确定</a-button>
    </template>
  </a-modal>
  <a-modal v-model:open="downloadModal" @cancel="downloadCancel" :title="title" style="width:1500px">
    <a-button type="primary" @click="download" :loading="downloadLoading" style="margin-bottom: 20px">下载</a-button>
    <a-table :columns="innerColumns" :scroll="{ x: 'max-content'}" :dataSource="innerDataList" ></a-table>
    <template #footer>
      <a-button @click="downloadCancel">取消</a-button>
    </template>
  </a-modal>
</template>
<script setup>
import CommonSearch from "@/components/commonSearch/index.vue";
import CommonTable from "@/components/commonTable/index.vue";
import {ref, onMounted} from "vue";
import {useSearchTable} from "@/hooks/table/useSearchTable";
import {getFoShanInventory} from "@/api/inventoryPools/foShan.js";
import {getManyDictItems} from "@/api/system/dict.js";
import {getToken} from "@utils/storage.js";
import {message} from "ant-design-vue";
import {apiBaseUrl} from "@utils/service/index.js";
const exportLoading = ref(false)
const downloadLoading = ref(false)
const importModal = ref(false)
const downloadModal = ref(false)
const btnLoading = ref(false)
const title = ref('US方向装柜库存隔离解析')
const site = ref('')
const fileList = ref([])
const headers = ref({
  "X-Access-Token":getToken()
})
const action = ref(apiBaseUrl + 'sys/common/upload')
const exportData = () => {
  importModal.value = true
}
const importCancel = () => {
  fileList.value = []
  site.value = ''
  importModal.value = false
}
const downloadCancel = () => {
  downloadModal.value = false
}
const handleOk = async () => {
  try{
    console.log(fileList.value,site.value)
    importCancel()
    downloadModal.value = true
  }catch (e) {
    message.error(e)
  }finally {

  }
}
const columns = [
  {
    "dataIndex": "sku",
    "title": "SKU",
    "align": "center",
    "fieldType": "String"
  },
  {
    "dataIndex": "skuType_dictText",
    "title": "类型",
    "align": "center",
    "fieldType": "String"
  },
  {
    "dataIndex": "minCreateTime",
    "title": "最早缺货时间",
    "align": "center",
    "fieldType": "Date"
  },
  {

    "dataIndex": "qty",
    "title": "总缺货数",
    "align": "center",
    "fieldType": "Long"
  },
  {

    "dataIndex": "fsAvailable",
    "title": "佛山现货",
    "align": "center",
    "fieldType": "Long"
  },
  {

    "dataIndex": "fsSellable",
    "title": "佛山可发",
    "align": "center",
    "fieldType": "Long"
  },
  {

    "dataIndex": "fsPurchase",
    "title": "采购中",
    "align": "center",
    "fieldType": "Long"
  },
  {
    "title": "缺货明细",
    "align": "center",
    "children":[
      {

        "dataIndex": "qtyUsCa",
        "title": "美国CA缺货",
        "align": "center",
      },
      {
        "dataIndex": "qtyUsTx",
        "groupTitle": "缺货明细",
        "title": "美国TX缺货",
        "align": "center",
        "fieldType": "Long"
      },
      {
        "dataIndex": "qtyUsNj",
        "groupTitle": "缺货明细",
        "title": "美国NJ缺货",
        "align": "center",
        "fieldType": "Long"
      },
      {
        "dataIndex": "qtyCa",
        "groupTitle": "缺货明细",
        "title": "加拿大缺货",
        "align": "center",
        "fieldType": "Long"
      },
      {
        "dataIndex": "qtyEu",
        "groupTitle": "缺货明细",
        "title": "欧盟缺货",
        "align": "center",
        "fieldType": "Long"
      },
      {
        "dataIndex": "qtyGb",
        "groupTitle": "缺货明细",
        "title": "英国缺货",
        "align": "center",
        "fieldType": "Long"
      },
      {
        "dataIndex": "qtyAu",
        "groupTitle": "缺货明细",
        "title": "澳洲缺货",
        "align": "center",
        "fieldType": "Long"
      },
      {
        "dataIndex": "qtyOther",
        "groupTitle": "缺货明细",
        "title": "其他缺货",
        "align": "center",
        "fieldType": "Long"
      },
    ]
  },
  {
    "dataIndex": "hasOrder_dictText",
    "title": "有订单",
    "align": "center",
    "fieldType": "String"
  },
  {
    "dataIndex": "isStockout_dictText",
    "title": "需采购",
    "align": "center",
    "fieldType": "String"
  }
]
const innerColumns = [
  {
    "dataIndex": "sku",
    "title": "SKU",
    "align": "center",
    "fieldType": "String"
  },
  {
    "dataIndex": "skuType_dictText",
    "title": "类型",
    "align": "center",
    "fieldType": "String"
  },
  {
    "dataIndex": "minCreateTime",
    "title": "最早缺货时间",
    "align": "center",
    "fieldType": "Date"
  },
  {

    "dataIndex": "qty",
    "title": "总缺货数",
    "align": "center",
    "fieldType": "Long"
  },
  {

    "dataIndex": "fsAvailable",
    "title": "佛山现货",
    "align": "center",
    "fieldType": "Long"
  },
  {

    "dataIndex": "fsSellable",
    "title": "佛山可发",
    "align": "center",
    "fieldType": "Long"
  },
  {

    "dataIndex": "fsPurchase",
    "title": "采购中",
    "align": "center",
    "fieldType": "Long"
  },
  {
    "title": "缺货明细",
    "align": "center",
    "children":[
      {

        "dataIndex": "qtyUsCa",
        "title": "美国CA缺货",
        "align": "center",
      },
      {
        "dataIndex": "qtyUsTx",
        "groupTitle": "缺货明细",
        "title": "美国TX缺货",
        "align": "center",
        "fieldType": "Long"
      },
      {
        "dataIndex": "qtyUsNj",
        "groupTitle": "缺货明细",
        "title": "美国NJ缺货",
        "align": "center",
        "fieldType": "Long"
      },
      {
        "dataIndex": "qtyCa",
        "groupTitle": "缺货明细",
        "title": "加拿大缺货",
        "align": "center",
        "fieldType": "Long"
      },
      {
        "dataIndex": "qtyEu",
        "groupTitle": "缺货明细",
        "title": "欧盟缺货",
        "align": "center",
        "fieldType": "Long"
      },
      {
        "dataIndex": "qtyGb",
        "groupTitle": "缺货明细",
        "title": "英国缺货",
        "align": "center",
        "fieldType": "Long"
      },
      {
        "dataIndex": "qtyAu",
        "groupTitle": "缺货明细",
        "title": "澳洲缺货",
        "align": "center",
        "fieldType": "Long"
      },
      {
        "dataIndex": "qtyOther",
        "groupTitle": "缺货明细",
        "title": "其他缺货",
        "align": "center",
        "fieldType": "Long"
      },
    ]
  },
  {
    "dataIndex": "hasOrder_dictText",
    "title": "有订单",
    "align": "center",
    "fieldType": "String"
  },
  {
    "dataIndex": "isStockout_dictText",
    "title": "需采购",
    "align": "center",
    "fieldType": "String"
  }
]
const innerDataList = ref([])
const formItems = ref([
  {
    label:"站点",
    type:'select',
    field: 'site',
    options:[]
  },
  {
    label:'SKU',
    type:'input',
    field:'sku',
  },
  {
    label:"平台",
    type:'select',
    field: 'platform',
    options:[]
  },
])
const { dataList, query, loading, page, search, reset, onPageChange } = useSearchTable({
  searchAPI: getFoShanInventory,
  queryFactory: () => ({
    columns:'createTime'
  }),
  beforeSearch: () => {
    //处理日期
    if(query.value.time){
      query.value.minCreateTimeStart = query.value.time[0]
      query.value.minCreateTimeEnd = query.value.time[1]
    }else{
      delete query.value.minCreateTimeStart
      delete query.value.minCreateTimeEnd
    }
  },
});
/**
 * 初始化字典数据
 * @returns {Promise<void>}
 */
const init = async () => {
  try{
    const res = await getManyDictItems({
      dictCodeList:"site,platform"
    })
    formItems.value[0].options = res.result.site
    formItems.value[2].options = res.result.platform
  }catch (e){
    console.log(e)
  }
}
const download = async () => {
  try{
    downloadLoading.value = true
  }catch (e){
    message.error(e)
  }finally{
    downloadLoading.value = false
  }
}
onMounted(() => {
  init()
})
</script>
<style scoped>

</style>
